<template>
  <div class="hello">
    <div>{{ count }}</div>
    <div>{{ doubleCount }}</div>
    <div>{{ greetings }}</div>
    <div>x:{{ x }}, y:{{ y }}</div>
    <p>{{error}}</p>
    <Suspense>
      <template #default>
        <div>
          <async-show />
          <dog-show />
        </div>
      </template>
      <template #fallback>
        <h1>Loading...</h1>
      </template>
    </Suspense>
    <button @click="increase">click+1</button>
    <button @click="updateGreeting">update</button>
    <button @click="modalClickOpen">open</button>
    <hr />
    <h1 v-if="loading">loading...</h1>
    <img v-if="loaded" :src="result[0].url" />
    <modal :isOpen="modalIsOpen" @close-modal="modalClickClose">
      <template v-slot:modal>my modal</template>
    </modal>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, computed, toRefs, ref, watch, onErrorCaptured } from 'vue'
import useMousePosition from '@/hooks/useMousePosition'
import useURLLoader from '@/hooks/useURLLoader'
import Modal from '@/components/Modal.vue'
import AsyncShow from '@/components/AsyncShow.vue'
import DogShow from '@/components/DogShow.vue'

interface DataProps {
  count: number;
  doubleCount: number;
  increase(): void;
}

interface DogResult {
  message: string;
  status: string;
}

interface CatResult {
  id: string;
  url: string;
  width: number;
  height: number;
}

export default defineComponent({
  name: 'HelloWorld',
  components: {
    Modal,
    AsyncShow,
    DogShow,
  },
  setup() {
    const error = ref(null)
    onErrorCaptured((e: any) => {
      error.value = e
    })
    const data: DataProps = reactive({
      count: 0,
      doubleCount: computed(() => data.count * 2),
      increase: () => {
        data.count++
      }
    })
    const greetings = ref('')
    watch([greetings, () => data.count], (newValue, oldValue) => {
      console.log('oldValue:', oldValue)
      console.log('newValue:', newValue)
      document.title = `updated ${greetings.value}`
    })
    const updateGreeting = () => {
      greetings.value += 'Hello! '
      data.increase()
    }
    const { x, y } = useMousePosition()
    const { result, loading, loaded } = useURLLoader<CatResult[]>(
      'https://api.thecatapi.com/v1/images/search?limit=1'
    )
    watch(result, () => {
      if (result.value) {
        console.log(result.value[0].url)
      }
    })
    // toRefs
    const refData = toRefs(data)
    const modalIsOpen = ref(false)
    const modalClickOpen = () => {
      modalIsOpen.value = true
    }
    const modalClickClose = () => {
      modalIsOpen.value = false
    }
    return {
      ...refData,
      greetings,
      updateGreeting,
      x,
      y,
      result,
      loading,
      loaded,
      modalIsOpen,
      modalClickOpen,
      modalClickClose,
      error
    }
  },
})
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
